<template>
	<div class="personal">
		<van-nav-bar title="我的" placeholder fixed >
			 <template #right>
			    <i class="iconfont" style="font-size: 18px;" @click="toquestions">&#xe6c4;</i>
			  </template>
		</van-nav-bar>


		<div class="personal_head">
			<div>
				<img style="height: 60px;width: 60px;border-radius:50%;" :src="`http://localhost:8080/res/${loginUser.head_img}`" @click="login"/>
				<!-- <van-image round fit="cover" width="4rem" height="4rem" :src="`http://localhost:8080/res/${loginUser.head_img}`" @click="login"/> -->
			</div>
			<div>{{loginUser.user_name}}</div>
		</div>

		<div class="personal_vip">
			<div>
				<div><i class="iconfont">&#xe642;</i> 咚咚会员</div>
				<div>开通得6张无门槛哒哒红包</div>
			</div>
			<div>
				<van-button round to="/vip" size="small" color="linear-gradient(to right, #cd7f32, #ffd700)">
					<div style="color: #494a4a;margin: 5px;font-weight: 800;letter-spacing: 2px;font-size: 14px;">立即开通</div>
				</van-button>
			</div>
		</div>


		<!--我的资产-->
		<div class="personal_asset">
			<div class="personal_title_model">
				<span>我的资产</span>
			</div>
			<div>
				<div class="personal_asset_redbag" @click="myredbag">

					<svg class="icon" aria-hidden="true">
						<use xlink:href="#iconhongbao1"></use>
					</svg>

					<div>红包</div>
				</div>
				<div class="personal_asset_point">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#iconjifen2" style="font-size: 12px;"></use>
					</svg>
					<div>积分</div>
				</div>
			</div>
		</div>
		<!--我的通知-->
		<div class="personal_notice">
			<div class="personal_title_model">
				<span>我的通知</span>
			</div>

			<van-notice-bar color="#fa3b14" background="#ffffff" left-icon="volume-o" :scrollable="false">
				<van-swipe 
					vertical class="notice-swipe" 
					:autoplay="3000" 
					:show-indicators="false">
					<van-swipe-item>夏季饮品全场八折！！</van-swipe-item>
					<van-swipe-item>升级VIP有机会得现金红包</van-swipe-item>
					
				</van-swipe>
			</van-notice-bar>


		</div>

		<!--我的功能-->
		<div class="personal_option">
			<div class="personal_title_model">
				<span>我的功能</span>
			</div>
			<div>
				<!--个人地址修改-->
				<div class="personal_option_address" @click="changeaddress">
					<svg class="icon" aria-hidden="true" style="font-size: 12px;margin-left: 10px;">
						<use xlink:href="#iconwodedizhi1"></use>
					</svg>
					<div>我的地址</div>
				</div>
				<!--个人信息修改-->
				<div class="personal_option_change" @click="changeinfo">
					<svg class="icon" aria-hidden="true" style="font-size: 12px;margin-left: 10px;">
						<use xlink:href="#icongerenzhongxin_wodexinxi"></use>
					</svg>
					<div>我的信息</div>
				</div>
				<!--我的评价-->
				<div class="personal_option_common">
					<svg class="icon" aria-hidden="true" style="font-size: 12px;margin-left: 10px;">
						<use xlink:href="#iconwodepinglun"></use>
					</svg>
					<div>我的评价</div>
				</div>
			</div>
		</div>
		<van-divider>去主页逛逛吧 ~ </van-divider>
		<div style="height: 50px;"></div>
		<Navtab></Navtab>

	</div>
</template>

<script>
	import Navtab from "@/components/Navtab";
	export default {
		name: "Personal",
		data() {
			return {
				
				loginUser:{
					head_img:'用户1头像.jpg',
					user_name:'游客'
				},//登录用户
				
			};
		},
		methods: {
			myredbag() { //跳转到红包
				this.$router.replace('/personal/redbag');
			},
			changeinfo() { //跳转修改个人信息
				//console.log(1111);
				this.$router.replace('/personal/changeinfo');
			},
			changeaddress() { //我的地址
				this.$router.replace('/personal/address');
			},
			toquestions(){//问题页面
				this.$router.replace('/personal/questions');
			},
			//去登陆页面
			login(){
				this.$router.replace('/login');
			},
		},
		created() {
			this.axios.get(`http://localhost:8080/user/getlogin`).then(res => {
				if(res.data.loginUser!=null){
					this.loginUser='';
					this.loginUser = res.data.loginUser;
					console.log(res.data);
					console.log('重新跳回')
				}else{
					console.log("没登陆")
				}
			});
		},
		components: {
			Navtab
		},

	}
</script>

<style lang="less">
	.personal {
		background-color: #f4f4f4;
		height: 100%;
		overflow: auto;

		//个人中心头像昵称
		.personal_head {
			height: 100px;
			display: flex;
			background-color: white;

			>div {
				display: flex;

				&:nth-child(1) {
					margin: 0 5%;
					align-items: center;
				}

				&:nth-child(2) {
					align-items: center;
					font-size: 18px;
				}
			}
		}

		//vip栏栏
		.personal_vip {
			height: 70px;
			margin: 15px 10px;
			border-radius: 10px;
			background-image: linear-gradient(to top right, #494a4a 0%, #494a3b 100%);
			display: flex;

			>div {
				&:nth-child(1) {
					margin: 5px 30px 10px 15px;
					font-size: 16px;
					color: #e3ca4b;
					font-weight: 600;
					letter-spacing: 2px;

					div:nth-child(1) {
						font-weight: 400;
						font-size: 14px;
						line-height: 25px;
					}
				}

				&:nth-child(2) {
					margin: auto;
				}
			}
		}

		//我的资产
		.personal_asset {
			height: 130px;
			margin: 10px;
			border-radius: 10px;
			background-color: #fff;

			>div {
				display: flex;

				//红包积分图标
				&:nth-child(2) {
					//display: flex;
					font-family: "Helvetica Neue";
					font-size: 14px; //字体
					line-height: 16px; //行高
					color: #606266; //字体颜色  #303133
					font-weight: 400; //加粗
					letter-spacing: 1px;

					.personal_asset_redbag {
						margin: 5px 20px;

						>div {
							margin: 5px;
						}
					}

					.personal_asset_point {
						margin: 5px 0 5px 10px;

						>div {
							margin: 5px;
						}
					}
				}
			}
		}

		//我的通知
		.personal_notice {
			height: 100px;
			margin: 10px;
			border-radius: 10px;
			background-color: #ffffff;

			.notice-swipe {
				height: 60px;
				line-height: 60px;
				font-size: 16px;
			}
			>div {
				display: flex;


			}
		}

		.personal_option {
			height: 130px;
			margin: 10px;
			border-radius: 10px;
			background-color: #ffffff;

			>div {
				display: flex;

				//我的功能头头			
				&:nth-child(2) {
					//display: flex;
					font-family: "Helvetica Neue";
					font-size: 14px; //字体
					line-height: 16px; //行高
					color: #606266; //字体颜色  #303133
					font-weight: 400; //加粗
					letter-spacing: 1px;

					.personal_option_address {
						margin: 5px 20px;

						>div {
							//align-items: center;
							margin: 5px auto;
						}
					}

					.personal_option_change {
						margin: 5px 20px;

						>div {
							margin: 5px auto;
						}
					}

					.personal_option_common {
						margin: 5px 20px;

						>div {
							margin: 5px auto;
						}
					}
				}
			}
		}

		//我的xx模块
		.personal_title_model {
			height: 40px;
			align-items: center;

			>span {
				margin-left: 5%;
				font-size: 18px;
				line-height: 20px;
				color: #303133; //字体颜色
				font-weight: 600; //加粗
				letter-spacing: 1px;
			}
		}

		//图标
		.icon {
			width: 3em;
			height: 3em;
			vertical-align: -0.15em;
			fill: currentColor;
			overflow: hidden;
		}

	}
</style>
